$(function() {
    let layer = layui.layer;
    // 获取当前文章id
    let id = new URLSearchParams(location.search).get('id');
    commentList()

    // ========================================================
    // 评论列表
    function commentList() {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8888/api/articles/' + id + '/comments',
            success: function(res) {
                // console.log(res);
                if (res.status === 0) {
                    // 声明数组完成遍历
                    let arr = [`<h4><i class="sprites"></i>评论区</h4>`]
                    res.data.forEach(item => {
                        // console.log(item);
                        arr.push(`
                        <div class="kr_comment_card">
                        <div class="img-wrap">
                          <img src="./uploads/avatar_1.png" alt="">
                        </div>
                        <div class="info">
                          <p>${item.uname} · <span>2020-08-16</span></p>
                          <p>${item.content}</p>
                        </div>
                        <a href="javascript:;" class="like">${item.count}</a>
                      </div>
                        `)
                    });
                    // 将数组转为字符串
                    $('#kr-comm').html(arr.join(''))
                }
            }
        })
    }

    // =========================================================================
    // 发表评论
    // 声明变量评论人姓名,内容
    let $formUname = $('#form-uname');
    let $fromContent = $('#from-content');
    // 给提交评论按钮注册点击事件
    $('#publish-btn').on('click', function() {
            // 获取评论人姓名,内容
            let unameStr = $formUname.val().trim()
            let contentstr = $fromContent.val().trim()
                // console.log(unameStr);
                // console.log(contentstr);
                // 输入完内容后清空内容
            $formUname.val('')
            $fromContent.val('')
                // 声明变量将请求参数存储
            let pub = {
                uname: unameStr,
                content: contentstr
            }
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8888/api/articles/' + id + '/comments',
                data: pub,
                success: function(res) {
                    // console.log(res);
                    // 发表评论成功
                    if (res.status === 0) {
                        layer.msg(res.message);
                        // 调用评论列表函数进行刷新
                        commentList()
                    }

                }
            })
        })
        // ==================================================================================

    // 内容区回车发布功能
    $fromContent.on('keyup', function(e) {
            if (e.keyCode === 13) {
                $('#publish-btn').click()
            }
        })
        // ==============================================================================



})